<template>
    <!-- 店铺广告 -->
    <div class="storebanner">
        <div class="warp" :class="'style' + storeBannerInfo.layout">
            <!-- 蒙版 -->
            <div class="mask" :style="{background: `url(${storeBannerInfo.shareimg})no-repeat`}">
                <div class="maskBox"></div>
            </div>
            <!-- 中心 -->
            <div class="content">
                <!-- logo -->
                <div class="logo">
                    <img :src="getStoreLogo">
                    <div class="right_content">
                        <div class="title">{{common.StoreInfo.StoreName}}</div>
                        <div class="info">
                            <span class="all">全部商品32</span>
                            <span class="new">上新3</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// 引入 辅助函数
import { mapState, mapGetters } from 'vuex'

export default {
    props: ['storeBannerInfo'],
    computed: {
        ...mapState(['common']),
        ...mapGetters(['getStoreLogo'])
    }
}
</script>

<style lang="stylus">
    // 店铺广告
    .storebanner
        position relative
        overflow hidden
        .warp
            height 3.7rem
            // 蒙版
            .mask
                position absolute
                top 0
                left 0
                right 0
                bottom 0
                height 100%
                background-size cover!important
                .maskBox
                    height 100%
                    background rgba(0, 0, 0, .3)
            // 中心
            .content
                position absolute
                width 100%
                top 2.2rem
                padding-left 0.3rem
                // logo
                .logo
                    display flex
                    img 
                        width 1.16rem
                        height 1.16rem
                        background #fff
                        border-radius 50%
                    .right_content
                        margin-left 0.24rem
                        display flex
                        flex-direction  column
                        justify-content space-around
                        color #fff
                        .title
                            font-size 0.36rem
                            font-weight 700
                        .info
                            font-size .28rem
                            .all
                                position relative
                                padding-right 0.1rem
                                &::after
                                    content "|"
                                    position absolute
                                    top 0
                                    right 0
                                    width 0.02rem
                                    height 0.24rem
                                    color #e5e5e5
                            .new
                                padding-left  0.1rem
        // style2
        .style2
            height 4.76rem
            .mask
                height 3.7rem
            .content
                top 3rem
                .info
                    color #999
        // style3
        .style3
            height 5.16rem
            .mask
                height 3rem
            .content
                top 2.3rem
                padding 0
                .logo
                    flex-direction column
                    align-items center
                    img 
                        width 1.4rem
                        height 1.4rem
                    .right_content
                        display flex
                        flex-direction column
                        align-items center
                        .title
                            margin-top 0.4rem
                            color #333
                        .info
                            margin-top 0.2rem
                            color #999
        // style4
        .style4
            height 5rem
            .mask
                height 100%
            .content
                top 1rem
                padding 0
                .logo
                    flex-direction column
                    align-items center
                    img 
                        width 1.4rem
                        height 1.4rem
                    .right_content
                        margin -0.16rem 0 0 0
                        .title
                            color #fff
                            margin-top 0.4rem
                            padding-bottom 0.2rem
                            border-bottom 1px solid hsla(0,0%,100%,.5)
                            text-align center
                        .info
                            margin-top 0.2rem
</style>        
